<script setup lang="ts">
import dayjs from 'dayjs';
import { navigateTo, reLaunch, showLoading } from '@tarojs/taro';
import { Search2 as NutIconSearch2 } from '@nutui/icons-vue-taro';
import { state } from '/@/common/hooks/state';
import ARCHIVE_TYPE_FOLDER from '/@/assets/image/icon/archive-type-folder.png';
import { ARCHIVE_FILE_TYPE } from '/@/common/constant';
import ARCHIVE_TYPE_LOCK from '/@/assets/image/icon/archive-type-lock.png';
import { RETURN_DOSSIER } from '/@/api/modules/archive/police/dossier-record';
import { getSysImgUrl } from '/@/utils/index';
import { back } from '/@/utils/back';
import useArchiveList from '/@/common/hooks/archive-borrow-list';
const { next, navigation, openFile, refreshList } = useArchiveList();

/**
 * 归还
 */
function revert(id?: string) {
  showLoading();
  RETURN_DOSSIER({ ids: [id || ''] }).then((res) => {
    if (res.comResp.code === 100) {
      refreshList();
    }
  });
}
</script>

<template>
  <view class="archive-borrow-list app-page--1">
    <app-navbar title="档案借阅" @handleBack="back()" :hookBack="true" />
    <nut-tabs
      model-value="list"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'record') {
            reLaunch({ url: '/pages/archive-borrow/record/index' });
          }
        }
      "
    >
      <nut-tab-pane title="档案借阅" pane-key="list" />
      <nut-tab-pane title="借阅记录" pane-key="record" />
    </nut-tabs>
    <nut-searchbar v-model="state.keywords" placeholder="请输入档案名称" @search="refreshList">
      <template v-slot:leftin>
        <nut-icon-search2 />
      </template>
    </nut-searchbar>
    <scroll-view
      class="horizontal-scroll-view"
      :scroll-x="true"
      :lower-threshold="100"
      :scroll-with-animation="true"
      :scroll-left="state.scrollLeft"
      id="scroll_view_container"
    >
      <view
        v-for="(item, index) in state.selectedTypeList"
        :key="item.id || index"
        class="archive-borrow-list__navigation-item"
        @click="navigation(index)"
      >
        <text :style="{ color: index === state.selectedTypeList.length - 1 ? '#333' : '#507aee' }"
          >{{ item.dossierTypeName
          }}{{ index != state.selectedTypeList.length - 1 ? '>' : '' }}</text
        >
      </view>
    </scroll-view>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="archive-borrow-list__wrapper">
        <nut-cell-group>
          <nut-cell v-for="item in state.typeList" :key="item.id" @click="next(item)">
            <template v-slot:title>
              <view class="archive-borrow-list__left">
                <view>
                  <nut-avatar size="small" shape="square">
                    <image :src="ARCHIVE_TYPE_FOLDER" />
                  </nut-avatar>
                </view>
                <view class="archive-borrow-list__title">
                  <view>
                    <text>{{ item.dossierTypeName || '' }}</text>
                  </view>
                  <view class="archive-borrow-list__count">
                    <text>文档:&nbsp;&nbsp;{{ item.num || 0 }}</text>
                  </view>
                </view>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>

        <nut-cell-group>
          <nut-cell v-for="item in state.dtoList" :key="item.id" @click="openFile(item)">
            <template v-slot:title>
              <view class="archive-borrow-list__left">
                <view>
                  <nut-avatar size="small" shape="square">
                    <image :src="ARCHIVE_FILE_TYPE[item.category || 9]" />
                  </nut-avatar>
                </view>
                <view class="archive-borrow-list__title">
                  <view>
                    <text>{{ item.name || '' }}</text>
                  </view>
                  <view class="archive-borrow-list__count">
                    <text
                      >{{ item.memory || '' }}&nbsp;&nbsp;上传时间:&nbsp;{{
                        dayjs(item.uploadTime).format('YYYY-MM-DD HH:mm')
                      }}</text
                    >
                  </view>
                </view>
              </view>
            </template>
            <template v-slot:link>
              <view class="archive-borrow-list__right">
                <view @click.stop="revert(item.id)" v-if="item.enable === 1">
                  <text>归还</text>
                </view>
                <view v-else>
                  <image :src="ARCHIVE_TYPE_LOCK" />
                </view>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
    <view class="archive-borrow-list__footer">
      <nut-button
        block
        shape="round"
        type="info"
        @click="
          navigateTo({
            url: '/pages/archive-borrow/edit/index',
          })
        "
      >
        <text>申请借阅</text>
      </nut-button>
    </view>
    <nut-image-preview
      :show="state.showImagePreview"
      :images="
        state.imageList.map((url) => {
          return { src: getSysImgUrl(url) };
        })
      "
      @close="
        () => {
          state.showImagePreview = false;
        }
      "
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
